<template>
  <view class="content">
    <view class="small-text">将自动连接名称为 {{printerName}} 的打印机</view>
    <view class="small-text">连接：{{registered}}</view>
    <view class="text-area">
      <view class="mt-1">
        <button type="default" @click="print()">打印测试</button>
      </view>
      <view class="mt-1">
        <button type="default" @click="printText()">打印文字</button>
      </view>
      <view class="mt-1">
        <button type="default" @click="printQrcode()">打印二维码</button>
      </view>
      <view class="mt-1">
        <button type="default" @click="printBar()">打印条码</button>
      </view>
      <view class="mt-1">
        <button type="default" @click="printOff()">断开连接</button>
      </view>
      <view class="mt-1">
        <button type="default" @click="printImage()">打印图片</button>
      </view>
      <view class="mt-1">
        <button type="default" @click="printExampleImage()">打印示例图片</button>
      </view>
      <canvas canvas-id="hiddenCanvas"></canvas>
    </view>
  </view>
</template>

<script>
  import BluetoothPrinter from '@/uni_modules/chuangyin-bluetooth/utils/bluetooth_printer.js'
  import PrintPOS from '@/uni_modules/chuangyin-bluetooth/utils/print_pos.js'
  import PrintPic from '@/uni_modules/chuangyin-bluetooth/utils/print_pic.js'

  export default {
    data() {
      return {
        printerName: '',
        registered: ''
      }
    },

    onShow() {
      this.printer = new BluetoothPrinter(uni)
      this.printerName = uni.getStorageSync('printerName')

      const items = uni.getStorageSync('items') || {}
      items.pos = this.printerName
      uni.setStorageSync('items', items)
      console.debug('items', uni.getStorageSync('items'))

      this.printer.registeredDevices = [this.printerName]
    },
    
    onUnload() {
      this.printer.closeBLEConnection()
      delete this.printer
    },

    methods: {

      print() {
        const pos = new PrintPOS()
        pos.text_big('Bluetooth Printer!')
        pos.text('欢迎使用蓝牙打印机！')
        pos.barcode('123456789')
        pos.qrcode('https://one.work')

        this.printer.getState({
          success: (res) => {
            this.printer.writeValue(pos.render())
          }
        })
      },

      printImage() {
        const pos = new PrintPOS()
        const pic = new PrintPic(uni, this)
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          success: (res) => {
            pic.loadImageToCanvas(res.tempFilePaths[0], ress => {
              console.debug('回调数据：', ress)
              pos.image(ress.data, ress.head)
              const data = pos.render()
              console.debug('打印数据：', data)
              this.printer.getState({
                success: (res) => {
                  this.printer.writeValue(data)
                }
              })
            })
          }
        })
      },
      
      printExampleImage() {
        const pos = new PrintPOS()
        const fs = uni.getFileSystemManager()
        fs.readFile({
          filePath: '/static/example.bmp',
          success: res => {
            pos.image(res.data, ress.head)
            const data = pos.render()
            console.debug('打印数据：', data)
          }
        })
      },

      printText() {
        const pos = new PrintPOS()
        pos.text_big('Bluetooth Printer!')
        pos.text('欢迎使用蓝牙打印机！')
        const data = pos.render()
        console.debug('打印数据', data)

        this.printer.getState({
          success: (res) => {
            this.printer.writeValue(data)
          }
        })
      },

      printQrcode() {
        const pos = new PrintPOS()
        pos.qrcode('https://one.work')

        this.printer.getState({
          success: (res) => {
            this.printer.writeValue(pos.render())
          }
        })
      },

      printBar() {
        const pos = new PrintPOS()
        pos.barcode('123456789')

        this.printer.getState({
          success: (res) => {
            this.printer.writeValue(pos.render())
          }
        })
      },

      printOff() {
        const pos = new PrintPOS()
        pos.disconnect()

        this.printer.getState({
          success: (res) => {
            this.printer.writeValue(pos.render())
            this.printer.connectedDevice = {}
          }
        })
      }

    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .text-area {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .small-text {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    text-align: center;
    color: #999;
  }

  .mt-1 {
    margin-top: 0.75rem;
  }
</style>